<template>
	<view class="card-view" v-if="list.length > 0">
		<view class="card-view-box" v-for="(item, index) in list" @click="handleClickItem(item)"
			:style="[{ backgroundColor: item.bgColor }]">
			<view class="card-view-box-left">
				<view class="card-view-box-left-num">
					{{ item.endVal }}
				</view>
				<view class="card-view-box-left-title">
					{{ item.title }}
				</view>
			</view>
			<view class="card-view-box-right">
				<view class="card-view-box-right-img">
					<!-- 					<view v-if="item.icon" :class="item.icon ? 'fa ' + item.icon : ''" style="font-size: 80rpx;"></view>
 --> <img v-if="item.img" :src="`${baseUrl}/${item.img}`" style="width: 50px; height: 50px" />
				</view>
			</view>

		</view>
	</view>
</template>

<script setup>
import {
	postFormAction
} from "@/utils/request";
import {
	ref,
	onMounted
} from 'vue'
import { Api } from '@/utils/Api.js';

const baseUrl = ref(Api.baseUrl);

const props = defineProps({
	mainModel: {
		type: Object,
		default: () => {
			return {}
		}
	}
})
const url = {
	list: '/portal/listCard'
}
const list = ref([])
const init = async () => {
	const mainModel = props.mainModel || {}
	const res = await postFormAction(url.list, {
		id: mainModel.id
	})
	list.value = res?.data || []
}
const fetch = () => {
	init()
}
onMounted(fetch)
const handleClickItem = (item) => {
	console.log("handleClickItem", item)
	if (item.type == 'flow_mine') {
		uni.navigateTo({ url: '/sub_flow/mineFlow/MineFlow' })
	} else if (item.type == 'flow_doing') {
		uni.navigateTo({ url: '/sub_flow/doingFlow/DoingFlow' })
	} 
	else if (item.type == 'flow_distribute_to_me') {
		uni.navigateTo({ url: '/sub_flow/distFlow/DistFlow' })
	}
	else {
		uni.navigateTo({
			url: `/application/moduleList?record=${JSON.stringify({ code: item.moduleCode || item.query.moduleCode })}`,
		});
	}
}
</script>

<style lang="scss" scoped>
.card-view {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20rpx;
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx;

	&-box {
		background-color: #fff;
		padding: 30rpx 30rpx 20rpx 30rpx;
		border-radius: 16rpx;
		width: calc(40.8% - 20rpx);
		display: flex;
		justify-content: space-between;

		&-left {

			&-num {
				font-size: 35rpx;
				font-weight: bold;
			}

			&-title {
				margin-top: 6rpx;
				text-align: center;
				color: #bbb;
				font-size: 28rpx;
			}
		}

		&-right {
			display: flex;
			align-items: center;

			&-img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

	}
}
</style>